<template>
  <div class="wrapper">
    <commonHeader></commonHeader>
    <commonAside></commonAside>
    <section id="content">
      <div class="inner-wrapper">
        <nav id="page-nav">
          <ul class="clear-fix">
            <router-link tag="li" to="/phy/phy_show" @click.native="getPhyscialdisk(6001)">
              <a><i class="icon-show"></i>SHOW</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_error" @click.native="getPhyscialdisk(6002)">
              <a><i class="icon-errors"></i>PHY ERRORS</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_manage" @click.native="getPhyscialdisk(6003)">
              <a><i class="icon-manage"></i>MANAGE</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_counter" @click.native="getPhyscialdisk(6004)">
              <a><i class="icon-counter"></i>COUNTER</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_locate" @click.native="getPhyscialdisk(6005)">
              <a><i class="icon-locate"></i>LOCATE</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_assign" @click.native="getPhyscialdisk(6006)">
              <a><i class="icon-assign"></i>ASSIGN</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_remove" @click.native="getPhyscialdisk(6007)">
              <a><i class="icon-remove"></i>REMOVE</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_format" @click.native="getPhyscialdisk(6008)">
              <a><i class="icon-format"></i>FORMAT</a>
            </router-link>
            <router-link tag="li" to="/phy/phy_update" @click.native="getPhyscialdisk(6009)">
              <a><i class="icon-update"></i>UPDATE</a>
            </router-link>
          </ul>
        </nav>
        <div class="main-content">
          <router-view></router-view>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import commonHeader from './../../components/header/header.vue'
  import commonAside from './../../components/aside/aside.vue'
  import store from '../../store'
  export default {
    name: 'phy',
    components: {
      commonHeader,
      commonAside
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        controlForm: {}
      }
    },
    methods: {
      getPhyscialdisk (openid) {
        // Create a socket instance
        const that = this
        this.controlForm.opid = openid
        var data = this.controlForm
        var socket = store.state.socket
//        const socket = new WebSocket('ws://localhost:9000')
        // Open the socket
//        socket.onopen = function (event) {
        // Send an initial message
        that.controlForm.token = store.state.items
        console.log(JSON.stringify(data))
        socket.send(JSON.stringify(data))
        // Listen for messages
        socket.onmessage = function (event) {
//          alert('onmessage')
          console.log('Client received a message', event)
          if (event && JSON.parse(event.data) && JSON.parse(event.data).result === 0) {
            console.log(that.formData)
            that.formData = JSON.parse(event.data)
          } else {
            that.$message('发生错误，请重试')
          }
        }
        // Listen for socket closes
        socket.onclose = function (event) {
          console.log('Client notified socket has closed', event)
          that.$message('发生错误，请重试')
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  rel="stylesheet/scss">
  body{
    background: #ffffff;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    &:first-child {
      margin-top: 10px;
    }
  }
  .el-form {
    width: 600px;
  }
</style>
